<template>
	<header class="classify-header">
		<div class="classify-header-search">
			<div>
				<i class="iconfont icon-search"></i>
				<input :class="{active: active}" type="text" placeholder="搜索商品" @click="activeInput">
				<span @click="deActiveInput">取消</span>
			</div>
		</div>
	</header>
</template>

<script>
	export default {
		name: "Header",
		props: {
			active: {
				type: Boolean,
				required: true
			}
		},
		methods: {
			activeInput() {
				this.$emit('changeActive', true);
			},
			deActiveInput() {
				this.$emit('changeActive', false);
			}
		}
	}
</script>
